<template>
  <el-header class="area">
    <el-row class="header">
      <el-col :span="4" class="header-left">
        <router-link to="/" class="title">
          <el-image  style="width: 100px; height: 40px" :src="require('@/assets/logo.png')" fit="fill"></el-image>
        </router-link>
      </el-col>

      <el-col v-if="!simple" :span="16">
        <el-menu
            :router=true menu-trigger="click"
            active-text-color="#0066ff"
            :default-active="activeIndex"
            mode="horizontal">
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/category">文章分类</el-menu-item>
          <el-menu-item index="/discover">文章推荐</el-menu-item>
            <el-menu-item >
<!--              <el-input
                  v-model="searchVal"
                  @input="searchArticle(searchVal)"
                  placeholder="搜索感兴趣的文章"
                  clearable
                  prefix-icon="el-icon-search">
              </el-input>-->

              <template>
                <el-autocomplete
                    v-model="searchVal"
                    :fetch-suggestions="searchArticle"
                    placeholder="请输入内容"
                    @select="handleSelect"
                    clearable
                ></el-autocomplete>
              </template>


            </el-menu-item>
            <el-menu-item index="/write">
              <i class="el-icon-position"></i>发表文章
            </el-menu-item>
        </el-menu>
      </el-col>

      <template v-else>
        <slot></slot>
      </template>

      <el-col :span="4">
        <el-menu :router=true menu-trigger="click" mode="horizontal" active-text-color="#8690A6">
          <template v-if="!user.login">
            <el-menu-item index="/login">
              <el-button style="background-color: #0066ff;border-color: #0066ff;"
                         type="primary" size="mini" round>登录</el-button>

            </el-menu-item>
            <el-menu-item index="/register">
              <el-button style="background-color: #0066ff;border-color: #0066ff;"
                         type="primary" size="mini" round >注册</el-button>
            </el-menu-item>
          </template>

          <template v-else>

            <el-submenu active-text-color="#0066ff" index>
              <template slot="title">
                <el-image  style="width: 30px; height: 30px" :src="require('@/assets/avatar.jpg')" fit="fill"></el-image>
              </template>
              <el-menu-item  index @click=""><i class="el-icon-user"></i>
                <span>{{this.$store.state.account}}</span>
              </el-menu-item>
              <el-menu-item  index @click="logout"><i class="el-icon-switch-button"></i>退出</el-menu-item>
            </el-submenu>
          </template>
        </el-menu>
      </el-col>

    </el-row>
  </el-header>
</template>

<script>
  import {searchArticle} from "@/api/article";

  export default {
    name: 'BaseHeader',
    props: {
      activeIndex: String,
      simple: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        searchVal:'',
        /*user: {
          login :false,
          avatar:""
        }*/
      }
    },
    computed: {
      user() {
        let login = this.$store.state.account.length !== 0
        let avatar = this.$store.state.avatar
        return {
          login, avatar
        }
      }
    },
    methods: {
      logout() {
        this.$store.dispatch('logout').then(() => {
        this.$router.push({path: '/'})
        }).catch((error) => {
          if (error !== 'error') {
            that.$message({message: error, type: 'error', showClose: true});
          }
        })
      },
      searchArticle(queryString, cb){
        searchArticle(this.searchVal).then((res)=>{
          if(res.data.success){
            var results = [];
            for(const item of res.data.data){
              results.push({
                id:item.id,
                value:item.title
              });
            }
            cb(results)
          }
        })

      },
      handleSelect(item){
        this.$router.push({path: `/article/view/${item.id}`});
      },
      // handleSelect(item){
      //   this.$router.push({path: `/article/view/${item.id}`});
      // }
    }
  }
</script>

<style  >
/*header字体设置*/
  .el-menu-item{
    font-size: 16px;
  }
/*header选中状态的变化*/
  /*创作文章*/
  .el-menu-item.is-active{
    font-weight: 600;
  }
  .el-header {
    position: fixed;
    z-index: 1024;
    min-width: 100%;
    color: #8690a6;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
  }
  .title {
    margin-top: 10px;
    font-size: 24px;
  }

  .header-left {
    margin-top: 10px;
  }

  .title img {
    max-height: 2.4rem;
    max-width: 100%;
  }

  /*头像设置*/
  .header-picture {
    width: 36px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    /*background-color: #0066ff;*/
  }
</style>
